import { Component, Input, Output, EventEmitter } from '@angular/core';
import { CommonModule } from '@angular/common';
import { WidgetComponent } from '../../models/layout.models';
import { TableWidgetComponent } from './table-widget.component';
import { ViewWidgetComponent } from './view-widget.component';
import { BarChartWidgetComponent } from './bar-chart-widget.component';
import { LineChartWidgetComponent } from './line-chart-widget.component';

@Component({
  selector: 'app-widget-host',
  standalone: true,
  imports: [
    CommonModule,
    TableWidgetComponent,
    ViewWidgetComponent,
    BarChartWidgetComponent,
    LineChartWidgetComponent
  ],
  template: `
    <div class="widget-host">
      <ng-container [ngSwitch]="widget.type">
        <app-table-widget
          *ngSwitchCase="'table'"
          [widget]="widget"
          (delete)="onDelete()">
        </app-table-widget>

        <app-view-widget
          *ngSwitchCase="'view'"
          [widget]="widget"
          (delete)="onDelete()">
        </app-view-widget>

        <app-bar-chart-widget
          *ngSwitchCase="'bar-chart'"
          [widget]="widget"
          (delete)="onDelete()">
        </app-bar-chart-widget>

        <app-line-chart-widget
          *ngSwitchCase="'line-chart'"
          [widget]="widget"
          (delete)="onDelete()">
        </app-line-chart-widget>
      </ng-container>
    </div>
  `
})
export class WidgetHostComponent {
  @Input() widget!: WidgetComponent;
  @Output() delete = new EventEmitter<void>();

  onDelete() {
    this.delete.emit();
  }
}
